<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 谁不说俺家乡好</title>
    <style>
        /* 关于我们页面样式 */
        body {
            margin: 0;
            padding: 20px;
            background-color: #fff8dc;
            font-family: "Microsoft YaHei", "SimSun", serif;
            color: #333;
            line-height: 1.6;
        }
        
        .content-container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border: 1px solid #d2b48c;
        }
        
        /* 页面标题 */
        .page-title {
            text-align: center;
            color: #8B4513;
            font-size: 28px;
            margin-bottom: 30px;
            font-family: "SimSun", serif;
            border-bottom: 2px solid #8B4513;
            padding-bottom: 15px;
        }
        
        /* 关于内容 */
        .about-content {
            margin-bottom: 40px;
        }
        
        .about-section {
            margin-bottom: 30px;
            background-color: #f8f4e6;
            padding: 25px;
            border-radius: 8px;
            border: 1px solid #d2b48c;
        }
        
        .section-title {
            color: #8B4513;
            font-size: 22px;
            margin-top: 0;
            margin-bottom: 15px;
            font-family: "SimSun", serif;
            border-left: 5px solid #8B4513;
            padding-left: 10px;
        }
        
        .section-content {
            text-indent: 2em;
            margin-bottom: 15px;
            color: #555;
        }
        
        /* 中国传统装饰 */
        .chinese-pattern {
            height: 20px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" viewBox="0 0 40 20"><path d="M0,10 C10,0 30,0 40,10 C30,20 10,20 0,10 Z" fill="%23d2b48c"/></svg>');
            background-repeat: repeat-x;
            margin: 30px 0;
        }
        
        /* 返回按钮 */
        .back-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #8B4513;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-bottom: 20px;
        }
        
        .back-button:hover {
            background-color: #A0522D;
        }
        
        /* 页脚信息 */
        .footer-info {
            text-align: center;
            color: #666;
            font-size: 14px;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #d2b48c;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .content-container {
                padding: 20px;
            }
            
            .page-title {
                font-size: 24px;
            }
            
            .section-title {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="content-container">
        <a href="content.html" class="back-button">← 返回主页</a>
        
        <h1 class="page-title">关于我们</h1>
        
        <!-- 关于内容 -->
        <div class="about-content">
            <div class="about-section">
                <h2 class="section-title">网站介绍</h2>
                <p class="section-content">"谁不说俺家乡好"主题网站是一个展示浙江自然风光和人文景观的综合性网站。我们致力于通过精美的图片、详实的文字和互动的游戏，向广大网友展示浙江的独特魅力。</p>
                <p class="section-content">浙江是一个美丽富饶的地方，这里有西湖的柔美，有四明山的壮丽，有鲁迅故居的人文情怀，还有许多其他值得一游的地方。我们希望通过这个网站，让更多的人了解浙江、爱上浙江。</p>
            </div>
            
            <div class="about-section">
                <h2 class="section-title">网站特色</h2>
                <p class="section-content">1. <strong>三窗口布局</strong>：采用HTML框架集实现左导航+右上标题+右下内容的三窗口布局，使用户浏览更加便捷。</p>
                <p class="section-content">2. <strong>家乡景点介绍</strong>：详细介绍了杭州西湖、余姚四明山、绍兴鲁迅故居等浙江著名景点的自然风光和人文历史。</p>
                <p class="section-content">3. <strong>互动拼图游戏</strong>：提供了一个有趣的拖拽拼图游戏，让用户在娱乐中欣赏浙江的美丽风光。</p>
                <p class="section-content">4. <strong>背景音乐播放</strong>：支持背景音乐播放控制，为用户营造舒适的浏览氛围。</p>
                <p class="section-content">5. <strong>传统中文设计风格</strong>：网站整体设计采用传统中文风格，体现了浙江深厚的文化底蕴。</p>
            </div>
            
            <div class="about-section">
                <h2 class="section-title">制作团队</h2>
                <p class="section-content">本网站由热爱浙江、热爱家乡的团队精心制作。我们希望通过这个平台，让更多的人了解浙江的美丽风光和悠久历史，激发人们热爱家乡、建设家乡的热情。</p>
            </div>
            
            <div class="about-section">
                <h2 class="section-title">版权信息</h2>
                <p class="section-content">本网站所有内容仅供学习和欣赏，版权归原作者所有。如有侵权，请及时联系我们，我们将立即删除相关内容。</p>
            </div>
        </div>
        
        <div class="chinese-pattern"></div>
        
        <!-- 页脚信息 -->
        <div class="footer-info">
            <p>? 2023 谁不说俺家乡好 - 浙江风光主题网站 | 版权所有</p>
            <p>联系邮箱：contact@zj-travel.com</p>
        </div>
    </div>
    
    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const contentContainer = document.querySelector('.content-container');
            contentContainer.style.opacity = '0';
            contentContainer.style.transition = 'opacity 0.8s ease';
            
            setTimeout(() => {
                contentContainer.style.opacity = '1';
            }, 200);
            
            // 添加滚动动画效果
            const aboutSections = document.querySelectorAll('.about-section');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1
            });
            
            aboutSections.forEach(section => {
                section.style.opacity = '0';
                section.style.transform = 'translateY(20px)';
                section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                observer.observe(section);
            });
        });
    </script>
</body>
</html>